<template>
    <div v-for="(item, index) in listData" :key="item.id">
        <p>{{ index + 1 }}. {{ item.topics }}</p>
        <div>
            <div v-for="(optionItem, optionIndex) in item.options" :key="optionItem">
                <!-- <input v-if="item.answer.length == 1" type="radio">
                <input v-else-if="item.answer.length > 1" type="checkbox"> -->

                <input :type="item.answer.length == 1 ? 'radio' : 'checkbox'">
                {{ optionSymbol[optionIndex] }}、{{ optionItem }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const optionSymbol = ref(['A', 'B', 'C', 'D']);

const listData = ref([
    {
        id: '001',
        type: 0,
        topics: '下列选项中哪一项可以用来设置组件的计算属性？',
        options: ['computed', 'data', 'watch', 'methods'],
        answer: [0]
    },
    {
        id: '002',
        type: 0,
        topics: '下列哪一个指令可以用来绑定动态属性？',
        options: ['v-if', 'v-show', 'v-for', 'v-bind'],
        answer: [3]
    },
    {
        id: '003',
        type: 0,
        topics: '下列选项中哪一项可以用来设置组件的数据？',
        options: ['computed', 'data', 'watch', 'methods'],
        answer: [1]
    },
    {
        id: '004',
        type: 1,
        topics: '下列选项中哪些指令可以实现条件渲染？',
        options: ['v-if', 'v-else', 'v-for', 'v-bind'],
        answer: [0, 1]
    }
]);

</script>

<style scoped></style>